<!--
*@Author: QWP
*@Description: 下拉框选择器
*@Date: 2023-03-28 15:11:52
-->
<template>
  {{ value.value }}
  <a-select v-if="refresh"
    ref="select"
    v-bind="filterProps($attrs)"
    v-model:value="value"
    :options="options1"
    @change="change">
  </a-select>
</template>

<script lang="ts" setup>
defineOptions({
  name: "u-select",
});
import { ref, reactive, watch, useAttrs, isRef, nextTick } from "vue";
import { cloneDeep } from 'lodash'
import { isRefC, nullC, isValue } from '@/util/common'

interface Props {
  value: any,
  options: any[] | object , 
}
const props = defineProps<Props>();
const attrs = useAttrs()

const emits = defineEmits(['update:value', 'change'])

const value = ref<any>()
const options1 = ref<any[]>([])
const refresh = ref<boolean>(true)

const filterProps = (attrsP) => {
  const tAttrs = cloneDeep(attrsP)
  delete tAttrs['options']
  return tAttrs
}

const change = (...args) => {
  const value = args[0]
  emits('update:value', value instanceof Array ? value.join(',') : nullC(value))
  emits('change', ...args)
}

// 格式化
const formatOptions = () => {

}

watch(() => props.value, (nval, oval) => {
  if(['multiple', 'tags'].includes(attrs.mode)) {
    let arrs = nval instanceof Array ? nval : (nval || '').split(',').filter(i => isValue(i))
    value.value = arrs
  }
  else {
    value.value = nval ?? ''
  }
}, { immediate: true, deep: true })

watch(() => props.options, (nval, oval) => {
  let tData = isRefC(nval) ?? [];
  options1.value = tData;
}, { immediate: true, deep: true })

</script>

<style lang="scss" scoped></style>
